<template>
	<view class="xzfx-divider">
		<view class="xzfx-divider-box">
			<view class="xzfx-divider-line" :class="{lineDashed: dashed}"></view>
			<view class="xzfx-divider-text">
				<slot>分割线</slot>
			</view>
			<view class="xzfx-divider-line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xzfx-divider",
		props: {
			dashed: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xzfx-divider{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		.xzfx-divider-box{
			width: calc(100% - 50rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			.xzfx-divider-line{
				flex: 1 1 0%;
				border-bottom: 1rpx solid #e3e3e3;
			}
			.lineDashed{
				border-bottom: 1rpx dashed #e3e3e3;
			}
			.xzfx-divider-text{
				max-width: 80%;
				margin: 0 20rpx;
				font-size: 28rpx;
				color: #aaaaaa;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
</style>